<template>
	<!-- 优惠活动订单详情 -->
	<view>
		<view class="all-perfor">
			<view class="all-perfor-title">
				活动业绩汇总
			</view>
			<view class="all-perfor-tip">
				<!-- 新东方山师二教育季，原价2698元198元8节线下体育课，立省2400元 -->
				{{title}}
			</view>
			<view class="all-perfor-money">
				<view class="">
					成交额(元)
				</view>
				<view class="">
					<!-- ¥200000.<text>00</text> -->
					￥{{total_money}}
				</view>
			</view>
			<view class="course-statistics">
				<view class="course-statistics-title">
					课程数据统计
				</view>
				<view class="course-statistics-content">
					<view class="course-statistics-details">
						<view class="">{{zongsum}}</view>
						<view class="">总订单数</view>
					</view>
					<view class="course-statistics-details">
						<view class="">{{yisum}}</view>
						<view class="">已付款订单</view>
					</view>
					<view class="course-statistics-details">
						<view class="">{{weisum}}</view>
						<view class="">待付款订单</view>
					</view>
					<!-- <view class="course-statistics-line"></view>
					<view class="course-statistics-details">
						<view class="">{{courseData.courseCount}}</view>
						<view class="">报名课程(个)</view>
					</view>
					<view class="course-statistics-line"></view>
					<view class="course-statistics-details">
						<view class="">{{courseData.sendCount}}</view>
						<view class="">赠送课程(个)</view>
					</view> -->
				</view>
			</view>
			<view class="perfor-execl" @click="execlClick">
				一键导出业绩excel
			</view>
		</view>
		<view class="search-bnak-detail">
			<view class="">
				<view class="search-bnak-input">
					<image :src="imglink + 'member/search-icon.png'" mode="" @click="gainOrderData"></image>
					<input type="text" v-model="searchMsg"  placeholder="请输入微信昵称/手机号"/>
				</view>
				<view class="search-bnak-title" @click="queryList">
					搜索
				</view>
			</view>
		</view>
		<view class="order-nav">
			<view :class="checked1" @click="change_nav(0)">全部</view>
			<view :class="checked2" @click="change_nav(1)">已付款</view>
			<view :class="checked3" @click="change_nav(2)">待付款</view>
		</view>
		<view class="order-detail-content" v-if="orderDetail.length!=0">
			<view class="act-course-content" v-for="item in orderDetail" :key='item.order_id'>
				<view class="group-state-msg">
					<view class="group-state-msg-left">
						<view class="">
							<!-- <image src="https://tool.tuanhaoke.cn/static/image/head-portrait.png" mode=""></image> -->
							<image :src="item.customer_avatar" mode=""></image>		<!-- 头像 -->
						</view>
						<view class="">
							<text>{{item.customer_nickname}}</text> <!-- 昵称  item.user.nickname-->
							<text>{{item.date_added}}</text><!-- 下单时间： -->
						</view>
					</view>
					<view class="group-state-msg-right">
						<text>收款金额</text>
						<text style="color: red; font-size: 40upx; margin-left: 30upx;">￥{{item.origin_price}}</text>
					</view> 
				</view>
				<view class="act-course-content-form" v-if="item.custom_field_value_json[0].custom_field_value.length>0" > 
					<view class="" v-for="(ele,index) in item.custom_field_value_json[0].custom_field_value" :key="index" >
						<!-- {{ele}} -->
						<text>{{ele.name}}:</text>
						<text>{{ele.custom_field_value}}</text>
					</view>
					<view v-if="item.pay_status==1" style="position: relative;top: 0rpx;right: -500rpx;font-size: 35rpx;color: #2fc22f;">已付款</view>
					<view v-if="item.pay_status==0" style="position: relative;top: 0rpx;right: -500rpx;font-size: 35rpx;color: #ff0000;">未付款</view>
					<!-- <view class="">
						<text>姓名：</text>
						<text v-if="item.course[0].custom_field_value.length>0">{{ item.course[0].custom_field_value[1].custom_field_value }}</text>
					</view>
					<view class="">
						<text>联系电话：</text>
						<text v-if="item.course[0].custom_field_value.length>0">{{ item.course[0].custom_field_value[2].custom_field_value  }}</text>
					</view>
					<view class="">
						<text>年龄：</text>
						<text v-if="item.course[0].custom_field_value.length>0">{{ item.course[0].custom_field_value[3].custom_field_value }}</text>
					</view>
					<view class="">
						<text>性别：</text>
						<text v-if="item.course[0].custom_field_value.length>0">{{ item.course[0].custom_field_value[4].custom_field_value }}</text>
					</view>
					<view class="">
						<text>身高（cm）：</text>
						<text v-if="item.course[0].custom_field_value.length>0">{{ item.course[0].custom_field_value[5].custom_field_value }}</text>
					</view> -->
				</view>
				<view class="act-course-salesman">
					<view class="act-course-salesman-img">
						<image :src="item.shared_customer_avatar" mode=""></image>
						<!-- <image src="https://tool.tuanhaoke.cn/static/image/home/member-img.png" mode=""></image> -->
						<text>{{item.shared_customer_name}}</text>
						<view class="">
							业务员
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default{
		data(){
			return{
				zongsum:0,
				yisum:0,
				weisum:0,
				imglink: this.$store.state.imgLink,
				actCourseMember:[
					{name:'新东方GRE课程8节线下体验课，双十二特权活动…',num:'×1',coupon:'',money:'¥168.00'},
				],
				searchMsg:'',
				activity_id:"",
				title:'',
				total_money:0,
				order_num:0,
				orderDetail:[],
				pagesize:10,
				page:1,
				pay_status:0,
				checked1:["tab_item","click-nav"],
				checked2:["tab_item"],
				checked3:["tab_item"],
			}
		},
		onReachBottom() {
			this.page++
			this.gainOrderData()
		},
		onLoad(option) {
			let store_id = parseInt(option.store_id,10);
			if(!store_id>0){
				store_id = uni.getStorageSync('store_id')
			}else{
				uni.setStorageSync('store_id', store_id)
			}
			this.store_id = store_id
			this.$store.commit('updateStoreId',store_id)
			this.activity_id = uni.getStorageSync('actPerfor').activity_id
			this.title = uni.getStorageSync('actPerfor').name
			this.queryCurriculumStatistics()
		},
		onShow() {
			this.gainOrderData()
		},
		methods:{
			queryList(){
				this.page=1
				this.orderDetail=[]
				this.gainOrderData()
			},
			queryCurriculumStatistics(){
				this.$api.queryCurriculumStatistics({"activity_id":this.activity_id}).then(res => {
					console.log("queryCurriculumStatistics",res)
					this.zongsum = res.zongsum
					this.yisum = res.yisum
					this.weisum = res.weisum
				})
			},
			change_nav(e){
				if(e == 0){
					this.checked1 = ["tab_item","click-nav"]
					this.checked2 = ["tab_item"]
					this.checked3 = ["tab_item"]
				}else if(e == 1){
					this.checked1 = ["tab_item"]
					this.checked2 = ["tab_item","click-nav"]
					this.checked3 = ["tab_item"]
				}else if(e == 2){
					this.checked1 = ["tab_item"]
					this.checked2 = ["tab_item"]
					this.checked3 = ["tab_item","click-nav"]
				}
				// var arr = document.getElementsByClassName("tab_item");
				// for(let i=0;arr.length>i;i++){
				// 	if(i!=e){
				// 		arr[i].classList.remove("click-nav");
				// 	}else{
				// 		arr[i].classList.add("click-nav");
				// 	}
				// }
				
				this.pay_status=e
				this.page=1
				this.orderDetail=[]
				this.gainOrderData()
				
			},
			callPhone(phone){
				uni.makePhoneCall({
				    phoneNumber: phone  //仅为示例
				});
			},
			execlClick(){
				const data = {
					token:this.$store.getters.getToken,
					store_id:this.store_id
				}
				this.$api.getCustomerInfo(data).then(res => {
					console.log(res)
					//角色：1员工,  2队长
					console.log(this.customer_info,'当前用户信息')
					if(res.status&&res.data.role>1){
						uni.navigateTo({
							url:'../../../memberCenter/shopPerformance/execlForm/execlForm'
						})
					}else{
						uni.showToast({
							title:'店主和创建团长才能导出',
							icon:'none',
							duration:2000
						})
					}
				}).catch(err => {
					console.log(err)
				})
				
			},
			gainOrderData(){
				// this.orderDetail=[]
				let data = {
					token:this.$store.getters.getToken,
					activity_id:this.activity_id,
					key_word:this.searchMsg,
					pagesize:this.pagesize,
					page:this.page,
					pay_status:this.pay_status
				}
				this.$api.get_activity_detaile(data).then(res => {
					console.log(res)
					if(res.status){
						this.total_money = res.total_money
						this.order_num = res.list2.total
						this.orderDetail.push(...res.list2.data)
						
						
						console.log(res.list2,'OOOOOOOOOOOOOOOOOOOO');
						// let FieldMsgInfo = [
						// 	{
						// 		name:"报名科目",
						// 		field_id:261
						// 	},
						// 	{
						// 		name:"孩子姓名",
						// 		field_id:262
						// 	},
						// 	{
						// 		name:"联系电话",
						// 		field_id:263
						// 	},
						// 	{
						// 		name:"孩子年龄",
						// 		field_id:264
						// 	},
						// 	{
						// 		name:"孩子性别",
						// 		field_id:265
						// 	},
						// 	{
						// 		name:"身高",
						// 		field_id:266
						// 	},
						// ]
						
						// this.orderDetail.forEach(element => {
						// 	element.course[0].custom_field_value.forEach(item => {
						// 	item['field_name'] = FieldMsgInfo.filter(element => element.field_id ==item.custom_field_id )[0].name
						// })
						// })
						
						
						
					}else{
						uni.showToast({
							title:res.msg,
							icon:'none',
							duration:2000
						})
					}
				}).catch(err => {
					console.log(err)
				})
			}
		}
	}
</script>

<style>
	.order-nav{
		/* border: 1rpx #000000 solid; */
		overflow: hidden;
		background-color: #ffffff;
		padding: 15rpx 0;
		margin-left: 10rpx;
	}
	.order-nav view{
		float: left;
		border: 1rpx #bcbcbc solid;
		font-size: 40rpx;
		padding: 20rpx 60rpx;
	}
	.click-nav{
		background-color: #FF8B46;
		color: #ffffff;
	}
	page{
		background: #F3F3F4;
		padding-bottom: 20upx;
		box-sizing: border-box;
	}
	.all-perfor{
		width: 100%;
		padding: 30upx;
		box-sizing: border-box;
		background: #FFFFFF;
	}
	.all-perfor-title{
		text-align: center;
		color: #666666;
		font-size: 40upx;
		margin-top: 10upx;
	}
	.all-perfor-tip{
		color: #333333;
		font-size: 34upx;
		margin-top: 40upx;
		font-weight: 800;
	}
	.all-perfor-money{
		padding: 30upx 0;
		box-sizing: border-box;
		display: flex;
		justify-content: space-between;
		border-top: 1upx solid #DEDEDE;
		margin-top: 30upx;
		border-bottom: 1upx solid #DEDEDE;
	}
	.all-perfor-money>view:first-child{
		color: #333333;
		font-size: 30upx;
	}
	.all-perfor-money>view:last-child{
		color: #FF391F;
		font-size: 34upx;
	}
	.all-perfor-money>view>text{
		font-size: 28upx;
	}
	.course-statistics{
		margin-top: 28upx;
	}
	.course-statistics-title{
		color: #333333;
		font-size: 30upx;
	}
	.course-statistics-content{
		display: flex;
		justify-content: space-around;
		margin-top: 40upx;
		text-align: center;		
	}
	.course-statistics-details>view:first-child{
		color: #333333;
		font-size: 50upx;
		margin-bottom: 10upx;
	}
	.course-statistics-details>view:last-child{
		color: #999999;
		font-size: 24upx;
	}
	.course-statistics-line{
		width: 2upx;
		height: 46upx;
		border-left: 2upx solid #DEDEDE;
		margin-top: 20upx;
	}
	.perfor-execl{
		width: 638upx;
		height: 88upx;
		line-height: 88upx;
		text-align: center;
		margin: 0 auto;
		margin-top: 52upx;
		color: #FFFFFF;
		font-size: 32upx;
		border-radius: 44upx;
		background: linear-gradient(to right,#FE9543,#FF664F);
		box-shadow: 0 8upx 16upx 0 rgba(166, 13, 0, 0.23);
	}
	.search-bnak-detail{
		width: 100%;
		padding: 16upx 30upx;
		box-sizing: border-box;
		background: #FFFFFF;
		margin-top: 20upx;
	}
	.search-bnak-detail>view{
		width: 100%;
		height: 72upx;
		border-radius: 36upx;
		background: #F3F3F4;
		display: flex;
		justify-content: space-between;
	}
	.search-bnak-input{
		display: flex;
		flex-grow: 1;
		padding-left: 30upx;
		box-sizing: border-box;
		padding-top: 16upx;
		justify-content: space-between;
	}
	.search-bnak-input>image{
		width: 32upx;
		height: 32upx;
		margin-top: 4upx;
	}
	.search-bnak-input>input{
		font-size: 28upx;
		flex-grow: 1;
		margin-left: 20upx;
	}
	.search-bnak-title{
		width: 116upx;
		height: 72upx;
		line-height: 72upx;
		text-align: center;
		background: #FF8B46;
		border-radius: 0 36upx 36upx 0;
		color: #FFFFFF;
		font-size: 28upx;
	}
	.order-detail-content{
		width: 100%;
	}
	.explain-title{
		display: flex;
		padding: 0 30upx;
		box-sizing: border-box;
		width: 100%;
		background: #FFFFFF;
	}
	.explain-title>view:first-child{
		width: 8upx;
		height: 32upx;
		background: #FF8B46;
		margin-top: 6upx;
	}
	.explain-title>view:last-child{
		color: #333333;
		font-size: 30upx;
		margin-left: 10upx;
	}
	.act-course-content{
		width: 100%;
		padding: 22upx 30upx 30upx;
		box-sizing: border-box;
		background: #FFFFFF;
		margin-bottom: 20upx;
	}
	.act-course-phone{
		display: flex;
		justify-content: space-between;
	}
	.act-course-phone>view:first-child{
		color: #666666;
		font-size: 28upx;
		margin-left: 100upx;
		line-height: 40upx;
	}
	.act-course-phone>view:last-child{
		width: 120upx;
		height: 40upx;
		line-height: 40upx;
		text-align: center;
		color: #FFFFFF;
		font-size: 24upx;
		background: linear-gradient(to right,#FE9543,#FF664F);
		border-radius: 4upx;
		box-shadow: 0 8upx 16upx 0 rgba(166, 13, 0, 0.23);
	}
	.act-course-details{
		margin-top: 40upx;
	}
	.act-course-details-title{
		width: 100%;
		height: 64upx;
		line-height: 64upx;
		display: flex;
		padding: 0 28upx 0 20upx;
		box-sizing: border-box;
		background: #F4F5F9;
	}
	.act-course-details-title>text{
		display: inline-block;
		color:#666666;
		font-size: 24upx;
	}
	.act-course-details-title>text:nth-child(2){
		margin-left: 52upx;
	}
	.act-course-details-title>text:nth-child(3){
		margin-left: 76upx;
	}
	.act-course-details-title>text:nth-child(4){
		margin-left:86upx;
	}
	.act-course-details-common,.give-content-details{
		width: 100%;
		padding: 20upx 0 18upx;
		box-sizing: border-box;
		justify-content: space-between;
		border-bottom: 1upx solid #DEDEDE;
		display: flex;
	}
	.act-course-details-common text{
		display: inline-block;
		color: #333333;
		font-size: 28upx;
	}
	.act-course-details-common>text:nth-child(1){
		width: 284upx;
		font-size: 24upx;
	}
	.act-course-details-common>text:nth-child(3){
		color: #FF391F;
		margin-left: 20upx;
	}
	.give-content{
		margin-top: 30upx;
	}
	.give-content-details>text{
		color: #FF391F;
		font-size: 24upx;
	}
	.act-course-salesman{
		display: flex;
		justify-content: space-between;
		margin-top: 20upx;
	}
	.act-course-salesman-img{
		display: flex;
	}
	.act-course-salesman-img>image{
		width: 80upx;
		height: 80upx;
	}
	.act-course-salesman-img>text{
		display: inline-block;
		color: #333333;
		font-size: 28upx;
		margin-left: 20upx;
		line-height: 80upx;
	}
	.act-course-salesman-img>view{
		width: 78upx;
		height: 28upx;
		line-height: 28upx;
		text-align: center;
		color: #FF8B46;
		border: 1upx solid #FF8B46;
		font-size: 22upx;
		margin-top: 25upx;
		margin-left: 10upx;
	}
	.group-state-msg{
		display: flex;
		justify-content: space-between;
		padding-bottom: 20upx;
		border-bottom: 1upx solid #c6c6c6;
	}
	.group-state-msg-left{
		display: flex;
	}
	.group-state-msg-left>view>text{
		display: block;
		color: #333333;
		font-size: 28upx;
		margin-left: 20upx;
		line-height: 45upx;
	}
	.group-state-msg-left>view>image{
		width: 80upx;
		height: 80upx;
		border-radius: 50%;
	}
	.group-state-msg-left>view{
		position: relative;
	}
	.group-state-msg-left>view>view{
		width: 66upx;
		height: 28upx;
		text-align: center;
		color: #FFFFFF;
		line-height: 28upx;
		border-radius: 14upx 14upx 14upx 0;
		background: #FF8B46;
		font-size: 22upx;
		position: absolute;
		top: -10upx;
		right: -48upx;
	}
	.group-state-msg-right{
		color: #666666;
		font-size: 28upx;
		line-height: 80upx;
	}
	.group-state-msg-right>text{
	}
	.act-course-content-form{
		color: #666666;
		margin-top: 30upx;
		margin-left: 10upx;
		padding-bottom: 20upx;
		font-size: 30upx;
		line-height: 50upx;
		border-bottom: 1upx solid #c6c6c6;
	}
</style>
